<template>
	<view class="content">
		<view class="pageHeader">
			我的抢单
			<a class="generalBack" @click="backpage()" hover-class="none">
			 <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			 </a>
		</view>
		<view style="padding-top:168upx;">
			<view class="navbar">
				<view v-for="(navitem, index) in navList" :key="index" class="nav-item" :class="{current: tabCurrentIndex === index}"
				 @click="tabClick(index)">
					{{navitem.text}}
				</view>
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData('page')">
					<view v-if="tabItem.loaded === true && tabItem.orderList.length === 0" class="empty">
						<image src="/static/empty.png" mode="widthFix"></image>
						<view class="empty-tips">
							暂无数据~
						</view>
					</view>
					<view v-for="(item,index) in tabItem.orderList" :key="index" style="font-size: 28upx;margin-bottom:20upx;background-color: #fff;padding: 26upx 30upx;">
						<view style="display: flex;justify-content: space-between;padding-bottom: 10upx;border-bottom: 2upx solid #eee;">
							<view style="font-size: 24upx;color: #666;">订单号:{{item.order_no}}
								<text v-if="item.order_type=='12'" style="color: #EC6104;">（油卡订单）</text>
							</view>
							
						</view>
						<view style="display: flex;align-items: center;position: relative;padding-top: 10upx;">
							<image :src="item.image" style="width: 168upx;height: 168upx;border-radius: 6upx;margin-right: 20upx;"></image>
							<view style="display: flex;flex-direction: column;justify-content: space-between;flex:1;font-size: 28upx;color: #333;">
								<view class="goods-info">
									{{item.goods_name}}
								</view>
								<view style="color: #EC6104;font-size: 28upx;font-weight: 500;margin-top:16upx;">
									￥{{item.price}}
								</view>
								<view style="color: #999;font-size:24upx;margin-top: 40upx;">
								{{item.addtime}}
								</view>
							</view>
							<!-- <button class="rebtn cancel">{{item.assignment_msg}}</button> -->
						</view>
						<view class="flex aic fsb" style="font-size: 28upx;color: #666;margin-top: 12upx;padding-top:16upx;">
							<view>转让状态：{{item.assignment_msg}}</view>
							<!-- <view>开抢状态：<text :style="{color:(item.status==2?'#EC6104':(item.status==0?'#1D84E8':''))}">{{item.status_msg}}</text></view> -->
						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- <view class="regoodbox">
			<view style="margin-top: 20upx;">
				<view v-for="(item,index) in panicbuying" :key="index" style="font-size: 28upx;margin-bottom:20upx;background-color: #fff;padding: 26upx 30upx;">
					<view style="display: flex;justify-content: space-between;padding-bottom: 10upx;border-bottom: 2upx solid #eee;">
						<text style="font-size: 24upx;color: #666;">订单号:{{item.order_no}}</text>
						
					</view>
					<view style="display: flex;align-items: center;position: relative;padding-top: 10upx;">
						<image :src="item.image" style="width: 168upx;height: 168upx;border-radius: 6upx;margin-right: 20upx;"></image>
						<view style="display: flex;flex-direction: column;justify-content: space-between;flex:1;font-size: 28upx;color: #333;">
							<view class="goods-info">
								{{item.goods_name}}
							</view>
							<view style="color: #EC6104;font-size: 28upx;font-weight: 500;margin-top:16upx;">
								￥{{item.price}}
							</view>
							<view style="color: #999;font-size:24upx;margin-top: 40upx;">
							{{item.addtime}}
							</view>
						</view>
						
						<button class="rebtn cancel">{{item.assignment_msg}}</button>
					</view>
					<view class="flex aic fsb" style="font-size: 28upx;color: #666;margin-top: 12upx;padding-top:16upx;">
						<view>开抢状态：<text :style="{color:(item.status==2?'#EC6104':(item.status==0?'#1D84E8':''))}">{{item.status_msg}}</text></view>
						<view>转让状态：{{item.assignment_msg}}</view>
					</view>
				</view>
							
				
			</view>
		</view> -->
	</view>
	</template>
	<script>
	import postAjax from '../../API/postAjax.js'
	import uniLoadMore from '@/components/uni-load-more.vue'
	export default {
		data() {
			return {
				userToken:'',// token
				panicbuying:[],
				tabCurrentIndex: 0,//头部切换
				// 加载的属性
				loadingType: 0,
				page_total: '',
				pageindex: 0,
				current: '',//swiper切换
				navList: [{
						state: 0,
						text: '未开抢',
						orderList: [],
						loadingType: 'more'
					},
					{
						state: 1,
						text: '开抢失败',
						orderList: [],
						loadingType: 'more',
					},
					{
						state: 2,
						text: '开抢成功',
						orderList: [],
						loadingType: 'more',
					}
					// {
					// 	state: 3,
					// 	text: '已下架',
					// 	orderList: [],
					// 	loadingType: 'more',
					// },
					// {
					// 	state: 4,
					// 	text: '开抢失败',
					// 	orderList: [],
					// 	loadingType: 'more',
					// }
				],
			}
		},
		components: {
			uniLoadMore
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.getPanicBuying()
		},
		methods: {
			// 返回上一页
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.getPanicBuying('tabChange');
			},
			// getPanicBuying() {
			// 	let that = this
			// 	postAjax('Panicbuying/Panicbuying',{
			// 		token:that.userToken,
			// 		m:0,
			// 		n:30,
			// 	},function(data){
			// 		console.log(data)
								
			// 		if(data.code==0){
			// 			that.panicbuying=data.data
			// 		}else{
			// 			that.getPanicBuying()
			// 		}
			// 	})
			// },
			//获取订单列表
			getPanicBuying(source) {
				//这里是将订单挂载到tab列表下
				let that = this
				let index = that.tabCurrentIndex;
				let navItem = that.navList[index];
				let state = navItem.state;
				let postdata = {}
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					// that.pageindex=1
					that.pageindex = navItem.loadindex
					return;
				}
				// if (source === 'tabChange' && navItem.loaded !== true) {
				// 	that.pageindex = 1
				// }
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (source === 'page') {
					// that.pageindex++
				}
				postdata = {
					token: that.userToken,
					m: that.pageindex,
					n:4,
					status: state,
					type: 1
				}
				// console.log(postdata)
				
				// console.log(postdata)
				navItem.loadingType = 'loading';
				// 我的订单列表
				let myorderList = []
				// 获取的订单数据
				postAjax('Panicbuying/Panicbuying', postdata, function(data) {
					if (data.code == 0) {
						// console.log(data.data)
						myorderList = data.data
						if (myorderList.length > 0) {
							myorderList.forEach(item => {
								navItem.orderList.push(item);
							})
							if (navItem.orderList.length > 4) {
								navItem.loadingType = 'more';
			
							} else {
								navItem.loadingType = 'nodata';
								// that.pageindex--
							}
							that.pageindex++
							that.$set(navItem, 'loadindex', that.pageindex);
						}else {
							navItem.loadingType = 'noMore';
						}
						if(navItem.orderList.length==0){
							navItem.loadingType = 'nodata';
						}
						that.$set(navItem, 'loaded', true);
					}
				})
			},
		}
	}
	
</script>

<style>
	.content {
		height: 100vh;
		background-color: #F9F9F9;
	}
	.goods-info{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:1;}
	.cancel{color:#fff;border:2upx solid #ccc;background-color: #ccc;border-radius: 8upx;}
	.pageHeader{position: fixed;top:0;left:0;z-index:999;width: 100%;height: 128upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.rebtn{display: inline-block;font-size: 30upx;border-radius: 4upx;height: 58upx;line-height: 58upx;position: absolute;bottom:0;right: 20upx;}
	.rebtn::after{border: none;}
	.regoodbox{padding: 170upx 0upx 22upx;}
	.total-wrap {
	  width: 100vw;
	  height: auto;
	  box-sizing: border-box;
	  padding: 20upx;
	}
	.logistics-title {
		position: relative;
	    box-sizing: border-box;
	    padding:16upx 0;
		border-bottom:2upx solid #EEEEEE;
	    line-height: 28upx;
	    color: #4B4B4B;
	    font-size: 26upx;
	    font-family: 'PingFangSC-Medium';
	    text-align: left;
	}
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin-top: -10vh;
		align-items: center;
	
	}
	
	
	.swiper-box {
		height: calc(100% - 144px);
	}
	
	.list-scroll-content {
		height: 100%;
	}
	
	.uni-swiper-item {
		height: auto;
	}
	
	
	.empty image {
		width:240upx;
		margin-bottom: 30upx;
	}
	.empty-tips {
		display: flex;
		font-size: 30upx;
		color: #666;
	
	}
	.navbar {
		display: flex;
		height: 80upx;
		color: #999;
		padding: 0 10upx;
		background: #fff;
		/* box-shadow: 0 2px 5px rgba(0,0,0,.06); */
		position: relative;
		z-index: 10;
		margin-bottom: 10upx;
	}
	
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 28upx;
		color: #303133;
		position: relative;
	}
	
	.current {
		color: #EC6104;
	}
	
	.current:after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 54upx;
		height: 0;
		border-bottom: 2px solid #EC6104;
	}
	
</style>
